<template>
    <div class="addActive">
        <div class="activeData">
          <el-card class="box-card" style="height:350px;" >
               <el-form label-width="80px" :model="activeData" float='left' width='90%'>
                    <el-form-item label="活动名称" prop="name" :rules="[{ required: true, message: '请输入活动名称'}]">
                      <el-input v-model="activeData.name" placeholder="活动名称"></el-input>
                    </el-form-item>
                    <el-form-item label="活动类型" prop="type" :rules="[{required:true,message:'请输入活动类型'}]">
                      <el-input v-model="activeData.type" placeholder="活动类型"></el-input>
                    </el-form-item>
                    <el-form-item label="开始时间" prop="startTime" :rules="[{ required: true, message: '请设置开始时间'}]">
                      <el-date-picker v-model="activeData.startTime" style="width:194px;" size="mini" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="结束时间" prop="endTime" :rules="[{ required: true, message: '请设置结束时间'}]">
                      <el-date-picker v-model="activeData.endTime" style="width:194px;" size="mini" type="date" placeholder="选择日期"></el-date-picker>
                    </el-form-item>
                    <el-form-item label="活动描述" prop="descr" :rules="[{required:true,message:'请输入活动描述'}]">
                       <el-input type="textarea" v-model="activeData.descr" placeholder="活动描述"></el-input>
                    </el-form-item>
                </el-form>
               <ecpUpload title="上传或修改轮播图片" v-model="activeData.photo" style="float:right;position:relative;right:270px;top:-300px;"></ecpUpload> 
          </el-card>
       </div>
       <div class="activeSearch">
         <el-form :inline="true" :model="Datasearch" class="demo-form-inline">
            <el-form-item label="目标金额" style="width:100%" prop="cash" :rules="[{required:true,message:'输入目标金额'}]">
              <el-input v-model="Datasearch.cash" placeholder="目标金额"></el-input>
            </el-form-item>
            <el-form-item label="商品名称" prop="name" :rules="[{required:true,message:'商品名称'}]">
              <el-input v-model="Datasearch.name" placeholder="商品名称"></el-input>
            </el-form-item>
            <el-form-item label="价格" prop="cash" :rules="[{required:true,message:'价格'}]">
              <el-col :span="11">
                <el-input v-model="Datasearch.low_price" placeholder="最低价格"></el-input>
              </el-col>
              <el-col class="line" :span="2">-</el-col>
              <el-col :span="11">
                <el-input v-model="Datasearch.high_price" placeholder="最高价格"></el-input>
              </el-col>
            </el-form-item>
            <el-form-item label="商品分类" prop="region" :rules="[{required:true,message:'请选择商品分类'}]">
              <el-select v-model="Datasearch.region" placeholder="请选择">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary">查询</el-button>
            </el-form-item>
        </el-form>
       </div>
       <div class="prolist">
           <ul>
              <li>
                  <span><img  src="~/static/images/de.png"/></span>
                  <span><p>山田studio1</p><p>山田studio1</p><p>ID：1234567</p></span>
                  <p><el-input v-model="input" placeholder="商品分类"></el-input></p>
                  <p><el-input v-model="input" placeholder="商品数量"></el-input></p>
              </li>
              <li>
                  <span><img  src="~/static/images/de.png"/></span>
                  <span><p>山田studio1</p><p>山田studio1</p><p>ID：1234567</p></span>
                  <p><el-input v-model="region" placeholder="商品分类"></el-input></p>
                  <p><el-input v-model="num" placeholder="商品数量"></el-input></p>
              </li>
              <li>
                   <span><img  src="~/static/images/de.png"/></span>
                  <span><p>山田studio1</p><p>山田studio1</p><p>ID：1234567</p></span>
                  <p><el-input v-model="input" placeholder="商品分类"></el-input></p>
                  <p><el-input v-model="input" placeholder="商品数量"></el-input></p>
              </li>
           </ul>
       </div>
       <el-button type="text">添加目标金额</el-button>
       <div style="text-align:center;margin-top:30px;margin-botton:20px;">
            <el-row>
              <el-button type="primary" size="small" round>保存</el-button>
              <el-button type="primary" size="small" round>开始活动</el-button>
            </el-row>
       </div>
    </div>
</template>
<script>
import EcpUpload from "~/components/ecpUpload";
export default {
  components:{EcpUpload},
   data(){
     return{
       input:'',
       num:'',
       region:'',
       activeData:{
         name:'',
         type:'',
         startTime:'',
         endTime:'',
         descr:'',
         photo:'',
       },
      Datasearch:{
          cash: '',
          name:'',
          low_price:'',
          high_price:'',
          region: ''
        },
        prolist:[{
             imgurl:'',
             name:'',
             id:'',
             region:'',
             num:''
        },{
             imgurl:'',
             name:'',
             id:'',
             region:'',
             num:''
        },
        {
             imgurl:'',
             name:'',
             id:'',
             region:'',
             num:''
        },]

     }
   }
  
}
</script>
<style lang="scss" scoped>
  .addActive{
    padding:30px 50px;
    & /deep/{
      .el-input__inner {
        border-radius:20px;
        height:25px;
        width:120px;
        line-height:25px;
        background-color: #f0f5fb;
      }
      .el-textarea{
        width:200px;
        height:60px; 
      }
      .el-textarea__inner{
         background-color: #f0f5fb;
      }
    }
    .activeSearch{
      background-color: #fff;
      padding:20px 30px;
      border-bottom: 1px solid #f0f5fb;
      margin-top: 10px;
      &/deep/{
        .el-form--inline .el-form-item__label{
          margin-left:10px;
        }
      }
    }
    .prolist{
      padding:20px 30px;
      border-top:1px black solid;
      height:200px;
      background-color: #fff;
      ul li{
        list-style: none;
       width:30%;
       float:left;
       p{margin-top:10px;}
       span{
         float:left;
       }
      }
    }
  }

</style>
